<template>
    <a-modal 
    class="my-modal short" 
    v-model:visible="modal_show" 
    title="S3连接" 
    :footer="null"
    width="70%"
        :maskClosable="false" :centered="true" :destroyOnClose="true">
        <div class="body-content">
            <a-row style="width: 100%;margin: 5px 5px;">
                <a-space>
                    <a-button type="primary" @click="test_s3_link">测试连接</a-button>
                    <a-button type="primary" @click="add_s3_link">添加新连接</a-button>
                </a-space>
            </a-row>
            <a-row style="width: 100%;margin: 5px 5px;">
                <a-table :columns="s3_columns" :dataSource="s3_links" :bordered="true" :pagination="null" size="small"
                    style="user-select: text;" rowKey="name">
                    <template #bodyCell="{ record, index, column }">
                        <template v-if="column.dataIndex == 'type'">
                            <span>{{ record?.type }}</span>
                        </template>
                        <template v-if="column.dataIndex == 'status'">
                            <a-badge :status="$common_apis.Get_badge_status_By_Status(record?.status)" />
                        </template>
                        <template v-else-if="column.dataIndex === 'operation'">
                            <span class="table-operation">
                                <a-dropdown>
                                    
                                    <a class="ant-dropdown-link" @click.prevent>编辑
                                        <DownOutlined />
                                    </a>
                                    <template #overlay>
                                        <a-menu>
                                            <a-menu-item>
                                                <a href="javascript:;" @click="select_s3(record,index)">选用</a>
                                            </a-menu-item>
                                            <a-menu-item>
                                                <a href="javascript:;" @click="edit_s3(record,index)">编辑</a>
                                            </a-menu-item>
                                            <a-menu-item>
                                                <a-popconfirm title="确定删除此连接吗?" ok-text="确定" cancel-text="取消"
                                                    @confirm="delete_s3_link(record, index)">
                                                    <a href="javascript:;">删除</a>
                                                </a-popconfirm>
                                            </a-menu-item>
                                        </a-menu>
                                    </template>
                                </a-dropdown>
                            </span>
                        </template>
                    </template>
                </a-table>
            </a-row>
        </div>
    </a-modal>
    <a-drawer title="通过输入添加点" placement="right" width="40%" :closable="false" :visible="new_s3_link_visible"
        @close="new_s3_link_drawer_close" class="my-drawer tif_objec_drawer" :zIndex="1005">
        <template #extra>
            <a-tooltip placement="bottom">
                <template #title>添加</template>
                <a-button @click="enable_add_s3_link" style="margin: 0 auto;margin-right: 10px;">
                    <template #icon><check-outlined /></template>
                </a-button>
            </a-tooltip>
        </template>
        <a-form :model="new_s3_link" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off">
            <a-form-item label="连接名">
                <a-col :span="22">
                    <a-input v-model:value="new_s3_link.name" :disabled="!new_s3_link?.isedit"/>
                </a-col>
            </a-form-item>
            <a-form-item label="endPoint">
                <a-col :span="22">
                    <a-input v-model:value="new_s3_link.endPoint" />
                </a-col>
            </a-form-item>
            <a-form-item label="accessKeyId">
                <a-col :span="22">
                    <a-input v-model:value="new_s3_link.accessKeyId" />
                </a-col>
            </a-form-item>
            <a-form-item label="secretAccessKey">
                <a-col :span="22">
                    <a-input v-model:value="new_s3_link.secretAccessKey" />
                </a-col>
            </a-form-item>
            <a-form-item label="bucket">
                <a-col :span="22">
                    <a-input v-model:value="new_s3_link.bucket" />
                </a-col>
            </a-form-item>
        </a-form>
    </a-drawer>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            modal_show: false,
            show_add_bt:false,
            s3_links:[],
            

            s3_columns: [
                {
                    title: '名称',
                    dataIndex: 'name',
                    align: 'center',
                    width: '100px',
                },
                {
                    title: 'endPoint',
                    dataIndex: 'endPoint',
                    align: 'center',
                    width: '100px',
                },
                {
                    title: 'accessKeyId',
                    dataIndex: 'accessKeyId',
                    align: 'center',
                    width: '150px',
                },
                {
                    title: 'secretAccessKey',
                    dataIndex: 'secretAccessKey',
                    align: 'center',
                    width: '150px',
                },
                {
                    title: 'bucket',
                    dataIndex: 'bucket',
                    align: 'center',
                    width: '150px',
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    align: 'center',
                    width: '50px',
                },
                {
                    title: '操作',
                    width: 80,
                    dataIndex: 'operation',
                    align: 'center'
                },
            ],
            new_s3_link:{ },
            new_s3_link_visible:false,

            type_in:"",
        };
    },
    components: {
        
    },
    beforeUnmount() {
        this.$mitt.off('enable_s3_links');
    },
    mounted() {
        this.$mitt.on('enable_s3_links', async (value) => {
            this.type_in=value?.type
            this.modal_show = true
            this.get_s3_links();
            this.reset_new_s3_link()
        });
    },
    methods: {
        async get_s3_links() {
            let s3_links=await this.$apis.get_s3_links()
            if(s3_links){
                this.s3_links=s3_links
            }
            return true
        },
        reset_new_s3_link(){
            this.new_s3_link= {
                isedit:true,
                name:"",
                endPoint:"",
                accessKeyId:"",
                secretAccessKey:"",
                bucket:"",
            }
        },
        add_s3_link(){
            this.reset_new_s3_link()
            this.new_s3_link_visible=true
        },
        async test_s3_link(){
            for (let i = 0; i < this.s3_links?.length; i++) {
                let one_element = this.s3_links[i];
                let update_s3_link_result=await this.$apis.test_s3_link(one_element)
                this.s3_links[i].status=update_s3_link_result
            }
        },
        async enable_add_s3_link(){
            if (this.new_s3_link?.name==""){
                this.$message.info("请输入name名称")
                return
            }
            if (this.new_s3_link?.endPoint==""){
                this.$message.info("请输入endPoint")
                return
            }
            if (this.new_s3_link?.accessKeyId==""){
                this.$message.info("请输入accessKeyId")
                return
            }
            if (this.new_s3_link?.secretAccessKey==""){
                this.$message.info("请输入secretAccessKey")
                return
            }
            let update_s3_link_result=await this.$apis.update_s3_link({
                name:this.new_s3_link?.name,
                endPoint:this.new_s3_link?.endPoint,
                accessKeyId:this.new_s3_link?.accessKeyId,
                secretAccessKey:this.new_s3_link?.secretAccessKey,
                bucket:this.new_s3_link?.bucket,
            })
            this.reset_new_s3_link()
            this.new_s3_link_drawer_close()
            this.get_s3_links()
        },
        new_s3_link_drawer_close(){ 
            this.new_s3_link_visible = false
        },
        edit_s3(record){
            let new_s3_link = JSON.parse(JSON.stringify(record))
            new_s3_link.isedit=false
            this.new_s3_link = new_s3_link
            this.new_s3_link_visible = true
        },
        async delete_s3_link(record) {
            await this.$apis.delete_s3_link({
                name:record?.name
            })
            this.get_s3_links()
        },
        select_s3(record){
            this.$mitt.emit('enable_s3_links_result', {
                s3: record,
                type:this.type_in
            });
            this.modal_show = false;
        },
    },
};
</script>